<template>
  <div class="role">
    <div class="search">
      <Hyform :formItems="formItems" :formData="formData" />
      <div class="search-btn">
        <el-button type="primary" @click="addUser">添加</el-button>
        <el-button @click="findSearch" type="primary" :icon="Search"
          >查找</el-button
        >
      </div>
      <HyTable :tableData="tableData" :tableItems="tableItems">
        <template #status="scope">{{
          scope.row.loading === true ? '是' : '否'
        }}</template>
        <template #operation="scope">
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button @click="delRoleBtn(scope.row)" type="danger" size="mini"
            >删除</el-button
          >
        </template>
      </HyTable>

      <Dialog ref="hyDialog"></Dialog>
      <div class="demo-pagination-block">
        <el-pagination
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="roleArgument.maxResultCount"
          layout="sizes, prev, pager, next"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, ref } from 'vue'
import { Hyform } from '@/base-ui/form/index'
import { formItems, tableItems } from './config/roleConfig'
import { HyTable } from '@/base-ui/table/index'
import Dialog from './cpns/dialog.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { RoleDelete } from '@/service/main/main'
export default defineComponent({
  name: 'user',
  components: { Hyform, HyTable, Dialog },
  setup() {
    const formData = reactive({
      keyword: '',
    })
    const store = useStore()
    const roleArgument = reactive({
      maxResultCount: 10,
      skipCount: 0,
    })
    store.dispatch('setting/goRoleData', { ...roleArgument, ...formData })
    const tableData = computed(() => {
      const listData = store.state.setting.roleData.items
      return listData
    })
    const hyDialog = ref()
    const addUser = () => {
      hyDialog.value.changeVisibility(true)
    }

    const delRoleBtn = (e: any) => {
      ElMessageBox.confirm('确认删除吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: false,
      })
        .then(() => {
          // console.log(e.id)
          RoleDelete(e.id)
          // 删除成功后重新调取数据
          store.dispatch('setting/goRoleData', { ...roleArgument, ...formData })
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
    }

    //获取总条数
    const totalCount = computed(() => {
      return store.state.setting.roleData.totalCount
    })
    const findSearch = () => {
      store.dispatch('setting/goRoleData', {
        ...roleArgument,
        ...formData,
      })
    }
    // 切换页码事件
    const handleCurrentChange = (val: any) => {
      roleArgument.skipCount = val - 1
      store.dispatch('setting/goRoleData', {
        ...roleArgument,
        ...formData,
      })
    }
    // 页码选择
    const handleSizeChange = (val: any) => {
      roleArgument.maxResultCount = val
      store.dispatch('setting/goRoleData', {
        ...roleArgument,
        ...formData,
      })
    }
    return {
      formItems,
      formData,
      tableItems,
      tableData,
      roleArgument,
      hyDialog,
      totalCount,
      addUser,
      delRoleBtn,
      findSearch,
      handleCurrentChange,
      handleSizeChange,
    }
  },
})
</script>

<style scoped lang="less">
.role {
  .search {
    .search-btn {
      margin: 20px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
